<script setup>
import { onMounted, ref, watch } from "vue";
import * as echarts from "echarts";
import axios from "axios";
import EmissionLine from "../components/EmissionLine.vue";
import { theme } from "../assets/js/theme.js";
import { mapJson } from "../assets/js/china.js";

const props = defineProps(["mapData", "emissionLineData"]);
const emit = defineEmits(["provinceChange"]);

let province = ref({
  provinceId: 0,
  name: "全国",
});
let emissionLineData = ref({});

var myChart;
var option = {
  title: {
    text: "中国碳排放地图",
    subtext: "Unit: Mt CO2",
    top: "5%",
    left: "7%",
  },
  tooltip: {
    trigger: "item",
    showDelay: 0,
    transitionDuration: 0.1,
    formatter: (province) => {
      // console.log("province: ", province)
      return `<span>${province.name} &nbsp;&nbsp;&nbsp; ${
        province.value + "" == "NaN" ? "值暂缺" : province.value
      }</span>`;
    },
  },
  visualMap: {
    // left: "right",
    right: "5%",
    bottom: "1.5%",
    min: 50,
    max: 9000,
    inRange: {
      color: [
        "#e3c1c1",
        "#dbadad",
        "#a87979",
        "#8c5656",
        "#874a6e",
        "#7a4866",
        "#59344a",
        "#4a263c",
        "#3b1429",
      ],
    },
    text: ["High", "Low"],
    calculate: true,
  },
  dataZoom: {
    type: "inside",
    dataZoom: "dataZoom",
  },

  series: [
    {
      type: "map",
      map: "chinaMap",
      roam: true,
      zoom: 1.7,
      // center: [116.20, 39.56], // 北京
      // center: [101.77, 36.62], // 西宁
      center: [86, 36],
      // label: {
      //   show: "true",
      // },
      // projection: {
      //   project: function (point) {
      //     return projection(point);
      //   },
      //   unproject: function (point) {
      //     return projection.invert(point);
      //   },
      // },
      emphasis: {
        label: {
          show: true,
        },
      },
      data: props.mapData,
    },
  ],
};

let provinceChange = (index) => {
  if (props.mapData[index].provinceId != -1) {
    province.value = props.mapData[index];
    emit("provinceChange", province.value);
  }
};

watch(
  () => [props.mapData, props.emissionLineData],
  () => {
    // props.mapData = newData;
    emissionLineData.value = props.emissionLineData;
    let option = {
      series: {
        data: props.mapData,
      },
    };
    myChart.setOption(option);
  },
  { deep: true },
  { immediate: true }
);

onMounted(async () => {
  // await axios.get("/src/assets/json/china.json").then((res) => {
  //   mapJson.value = res.data;
  // });

  echarts.registerMap("chinaMap", mapJson);
  myChart = echarts.init(document.getElementById("map"), theme);
  myChart.setOption(option);

  myChart.on("select", (param) => {
    provinceChange(param.dataIndexInside);
  });
});
</script>

<template>
  <div class="module">
    <span class="emissionLine">
      <!-- <EmissionLine /> -->
      <EmissionLine :emissionLineData="emissionLineData" :province="province" />
    </span>

    <div class="map" id="map"></div>
  </div>
</template>

<style lang="scss" scoped>
.module {
  // border: 1px solid red;
  position: relative;

  .emissionLine {
    z-index: 999;
    width: 4.8rem;
    height: 2.8rem;
    position: absolute;
    bottom: 1.5%;
    left: 0%;
  }
  .map {
    margin: 0.1rem;
    height: 6.4rem;
    width: 100%;
  }
}
</style>
>
